{% extends "member/layout.html" %}

{% block title %}个人信息{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card dashboard-card border-0">
            <div class="card-header bg-transparent border-0 pb-0">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="mb-0 text-primary fw-bold">
                        <i class="fas fa-user-circle me-2"></i>个人信息
                    </h4>
                    <a href="{{ url_for('member.userinfo.edit_profile') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-user-edit me-1"></i> 编辑资料
                    </a>
                </div>
            </div>
            <div class="card-body pt-4">
                <div class="row">
                    <!-- 左侧头像区域 -->
                    <div class="col-lg-4 col-md-5 text-center mb-4 mb-md-0">
                        <div class="position-relative d-inline-block">
                            <div class="avatar-container mb-3">
                                <img src="{{ url_for('static', filename='nopic.jpg') }}"
                                     class="rounded-circle img-thumbnail shadow"
                                     style="width: 180px; height: 180px; object-fit: cover;"
                                     alt="用户头像">
                                <div class="status-badge {{ 'bg-success' if member.status else 'bg-secondary' }}">
                                    <i class="fas fa-circle"></i>
                                </div>
                            </div>
                        </div>

                        <div class="user-meta mt-4">
                            <h5 class="fw-bold text-dark mb-1">{{ member.name }}</h5>
                            <p class="text-muted mb-2">{{ member.position or '未设置职位' }}</p>
                            <div class="d-flex justify-content-center align-items-center">
                                <span class="badge rounded-pill {{ 'bg-success' if member.status else 'bg-secondary' }} px-3 py-2">
                                    <i class="fas fa-user me-1"></i>{{ '启用' if member.status else '禁用' }}
                                </span>
                            </div>
                        </div>

                        <div class="registration-info mt-4 p-3 bg-light rounded">
                            <p class="small text-muted mb-1">
                                <i class="fas fa-calendar-alt me-1"></i> 注册时间
                            </p>
                            <p class="mb-0 fw-medium">{{ member.create_time.strftime('%Y-%m-%d') }}</p>
                        </div>
                    </div>

                    <!-- 右侧信息区域 -->
                    <div class="col-lg-8 col-md-7">
                        <!-- 基本信息 -->
                        <div class="info-section mb-4">
                            <div class="section-header mb-3">
                                <h5 class="text-primary fw-bold mb-0">
                                    <i class="fas fa-id-card me-2"></i>基本信息
                                </h5>
                                <div class="divider"></div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="info-item">
                                        <label class="info-label">
                                            <i class="fas fa-user me-1 text-muted"></i>用户名
                                        </label>
                                        <div class="info-content fw-medium">{{ member.name }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-item">
                                        <label class="info-label">
                                            <i class="fas fa-briefcase me-1 text-muted"></i>职位
                                        </label>
                                        <div class="info-content fw-medium">{{ member.position or '未设置' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 联系方式 -->
                        <div class="info-section mb-4">
                            <div class="section-header mb-3">
                                <h5 class="text-primary fw-bold mb-0">
                                    <i class="fas fa-address-book me-2"></i>联系方式
                                </h5>
                                <div class="divider"></div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="info-item">
                                        <label class="info-label">
                                            <i class="fas fa-mobile-alt me-1 text-muted"></i>手机号
                                        </label>
                                        <div class="info-content fw-medium">{{ member.mobile or '未设置' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-item">
                                        <label class="info-label">
                                            <i class="fas fa-envelope me-1 text-muted"></i>邮箱
                                        </label>
                                        <div class="info-content fw-medium">{{ member.email or '未设置' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 组织信息 -->
                        <div class="info-section">
                            <div class="section-header mb-3">
                                <h5 class="text-primary fw-bold mb-0">
                                    <i class="fas fa-building me-2"></i>组织信息
                                </h5>
                                <div class="divider"></div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="info-item">
                                        <label class="info-label">
                                            <i class="fas fa-users me-1 text-muted"></i>部门
                                        </label>
                                        <div class="info-content fw-medium">
                                            {{ member.department.name if member.department else '未设置' }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-item">
                                        <label class="info-label">
                                            <i class="fab fa-weixin me-1 text-muted"></i>企业微信ID
                                        </label>
                                        <div class="info-content fw-medium">{{ member.wecom_userid or '未绑定' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-transparent border-0 text-end pt-0">
                <p class="text-muted small">
                    <i class="fas fa-clock me-1"></i>
                    最后更新: {{ member.update_time.strftime('%Y-%m-%d %H:%M') if member.update_time else '从未更新' }}
                </p>
            </div>
        </div>
    </div>
</div>

<style>
.avatar-container {
    position: relative;
    display: inline-block;
}

.status-badge {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: white;
}

.section-header {
    position: relative;
}

.divider {
    height: 3px;
    width: 50px;
    background: linear-gradient(to right, var(--primary-color), transparent);
    margin-top: 8px;
    border-radius: 3px;
}

.info-item {
    padding: 12px 15px;
    background-color: #f8fafc;
    border-radius: 8px;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.info-item:hover {
    background-color: #edf2f7;
    border-left-color: var(--primary-color);
}

.info-label {
    font-size: 0.85rem;
    color: #718096;
    margin-bottom: 5px;
    display: block;
}

.info-content {
    font-size: 1rem;
    color: #2d3748;
}

.user-meta .badge {
    font-size: 0.8rem;
}

.registration-info {
    background-color: #f7fafc !important;
    border-left: 3px solid var(--primary-color);
}
</style>
{% endblock %}